<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>延时加载</title>
    <style type="text/css">
    body,
    div,
    ul,
    li {
        margin: 0;
        padding: 0;
    }
    
    #box {
        width: 770px;
        margin: 0 auto;
        padding: 10px 0 0 10px;
        background: #f00;
        overflow: hidden;
        zoom: 1;
    }
    
    #box li {
        float: left;
        width: 375px;
        height: 225px;
        color: #fff;
        padding: 10px 0;
        display: inline;
        text-align: center;
        margin: 0 10px 10px 0;
        background: #000 url(../../../src/images/lazyloading.gif) 50% 50% no-repeat;
    }
    
    #box li img.loaded {
        width: 353px;
        height: 225px;
        vertical-align: middle;
    }
    </style>
</head>
<script type="text/javascript">
var fgm = {
    on: function(element, type, handler) {
        return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent("on" + type, handler)
    },
    bind: function(object, handler) {
        return function() {
            return handler.apply(object, arguments)
        }
    },
    pageX: function(element) {
        return element.offsetLeft + (element.offsetParent ? arguments.callee(element.offsetParent) : 0)
    },
    pageY: function(element) {
        return element.offsetTop + (element.offsetParent ? arguments.callee(element.offsetParent) : 0)
    },
    hasClass: function(element, className) {
        return new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className)
    },
    attr: function(element, attr, value) {
        if (arguments.length == 2) {
            return element.attributes[attr] ? element.attributes[attr].nodeValue : undefined
        } else if (arguments.length == 3) {
            element.setAttribute(attr, value)
        }
    }
};
//延时加载
function LazyLoad(obj) {
    this.lazy = typeof obj === "string" ? document.getElementById(obj) : obj;
    this.aImg = this.lazy.getElementsByTagName("img");
    this.fnLoad = fgm.bind(this, this.load);
    this.load();
    fgm.on(window, "scroll", this.fnLoad);
    fgm.on(window, "resize", this.fnLoad);
}
LazyLoad.prototype = {
    load: function() {
        var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var iClientHeight = document.documentElement.clientHeight + iScrollTop;
        var i = 0;
        var aParent = [];
        var oParent = null;
        var iTop = 0;
        var iBottom = 0;
        var aNotLoaded = this.loaded(0);
        if (this.loaded(1).length != this.aImg.length) {
            for (i = 0; i < aNotLoaded.length; i++) {
                oParent = aNotLoaded[i].parentElement || aNotLoaded[i].parentNode;
                iTop = fgm.pageY(oParent);
                iBottom = iTop + oParent.offsetHeight;
                if ((iTop > iScrollTop && iTop < iClientHeight) || (iBottom > iScrollTop && iBottom < iClientHeight)) {
                    aNotLoaded[i].src = fgm.attr(aNotLoaded[i], "data-img") || aNotLoaded[i].src;
                    aNotLoaded[i].className = "loaded";
                }
            }
        }
    },
    loaded: function(status) {
        var array = [];
        var i = 0;
        for (i = 0; i < this.aImg.length; i++)
            eval("fgm.hasClass(this.aImg[i], \"loaded\")" + (!!status ? "&&" : "||") + "array.push(this.aImg[i])");
        return array
    }
};
//应用
fgm.on(window, "load", function() {
    new LazyLoad("box")
});
</script>

<body>
    <ul id="box">
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy1.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy2.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy3.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy4.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy5.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy6.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy7.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy8.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy9.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy10.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy11.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy12.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy13.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy14.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy15.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy16.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy17.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy18.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy19.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy20.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy21.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy22.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy23.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy24.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy25.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy26.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy27.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy28.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy29.jpg" /></li>
        <li><img src="../../../src/images/lazynone.gif" data-img="../../../src/images/lazy30.jpg" /></li>
    </ul>
</body>

</html>
